<template>
  <view>
    <!-- 自定义头部-->
    <view class="box-bg">
      <my-navbar :widthdata="titlewid">
        <template #icons>
          <uni-icons @click="back" color="white" type="left" size="20"> </uni-icons>
        </template>

        <template #title>
          <span id="myView" ref="myView" style="color: white;">地址管理</span>
        </template>
      </my-navbar>
    </view>



    <view v-if="addresslist" class="">
      <scroll-view class="left-scroll-view" scroll-y :style="{height: wh + 'px'}">
        <view class="" v-for="(item,index) in addresslist" :key="item.id"
          style="margin-top: 5px;padding-top:20px;background-color: white;width: 96%;margin-left: 2%;border-radius: 10px;  margin-bottom: 10px;  ">
          <view class="" style="display: flex;border-bottom: 1px solid #f3f3f3;">
            <view class=""
              style="padding-left: 10px;text-overflow:ellipsis;white-space: nowrap;overflow: hidden;width: 80%;">
              <view class="" style="display: flex;">

                <view v-if="item.label==='公司'" class="label" :style="'background-color:'+ '#e5f1fa'+';'">
                  <span style="">{{item.label}}</span>
                </view>
                <view v-if="item.label==='家'" class="label" :style="'background-color:'+ '#fcf8ea'+';'">
                  <span style="">{{item.label}}</span>
                </view>
                <view v-if="item.label==='学校'" class="label" :style="'background-color:'+ '#e5ffe9'+';'">
                  <span style="">{{item.label}}</span>
                </view>
                <view class="" style="">
                  <span
                    style="font-size: 14px;margin-left: 5px;">{{item.provinceName}}{{item.cityName}}{{item.districtName}}{{item.detail}}
                  </span>
                </view>

              </view>

              <view class="" style="padding-top: 10px;padding-bottom: 20px;color: #ccc;">
                <span>{{item.consignee}}</span>
                <span style="padding-left: 5px;padding-right: 5px;">{{item.sex==='1'?'男':'女'}}</span>
                <span>{{item.phone}}</span>
              </view>
            </view>

            <view class="" style="line-height: 60px;padding-left: 85%;position: absolute;">
              <image @click="editchandel(index)" style="width: 20px;height: 20px;" src="../../static/edit.png"
                mode="" />
            </view>
          </view>

          <view class="" style="padding-top:  10px;padding-bottom: 10px;padding-left: 10px;">
            <label>
              <checkbox class="checkbox.red" :class="{'checkbox.red': checked}" :checked="item.isDefault===1"
                @click="setaddress(index)" />
              <text>设为默认地址</text>
            </label>
          </view>
        </view>
      </scroll-view>
    </view>
    <view v-else class="" style="padding-top: 30%;padding-bottom: 30%;">
      <image src="/static/no_adress.png" mode=""></image>
      <view class="" style="text-align: center;">
        <text>一个地址都没有哦!</text>
      </view>
    </view>
    <!-- :style="'margin-top:'+btnwh+'px'" -->
    <!-- 下面的按钮-->
    <view class="" style="width: 96%;margin-left: 2%;padding-top: 20px;">
      <button @click="addchandel" style="background-color: orange;">
        <span>+新增收货地址</span>
      </button>
    </view>


    <van-toast id="van-toast" />
  </view>
</template>

<script>
  import Toast from '@/wxcomponents/@vant/weapp/toast/toast';
  import {
    addresslist,
    setdefault
  } from '@/api/address.js'

  export default {
    data() {
      return {
        default_address: 2,
        wh: 0,
        btnwh: 0,
        top1: 0,
        addresslist: '',
        titlewid: 0,
        ishsow: false
      };
    },



    created() {
      const sysInfo = uni.getWindowInfo()
      // 可用高度 = 屏幕高度 - navigationBar高度 - tabBar高度 - 自定义的search组件高度
      this.wh = sysInfo.windowHeight * 0.77
      this.btnwh = sysInfo.safeArea.height / 2
      this.top1 = sysInfo.statusBarHeight * 2 + 30

      this.initAddress()

    },
    mounted() {
      let info = uni.createSelectorQuery().in(this).select('#myView');
      info.boundingClientRect(data => {
        //  console.log(data, "data")
        this.titlewid = data.width
      }).exec()
    },

    methods: {
      //查询地址
      async initAddress() {
        const res = await addresslist()
        this.addresslist = res.data
        console.log(res, "res")
      },


      back() {
        uni.navigateTo({
          url: '/pages/order/order'
        })


      },
      editchandel(index) {
        /*    ?addressId='+ this.addresslist[index].id */
        uni.navigateTo({
          url: '/subpkg/edit_address/edit_address?addressId=' + this.addresslist[index].id

        })
      },

      addchandel() {

        uni.navigateTo({
          url: '/subpkg/add_address/add_address'
        })
      },
      //设置默认地址
      async setaddress(index) {
        const res = await setdefault(this.addresslist[index].id)
        if (res.code === 1) {
          Toast.success("设置默认地址成功")
        }
        this.initAddress()
      },



    },
  }
</script>

<style lang="scss">
  /*  < !---圆角设置---> */


  checkbox.red .wx-checkbox-input {
    border-radius: 50%;

  }

  /*  < !---背景色设置---> */
  checkbox.red[checked] .wx-checkbox-input,
  checkbox.red.checked .uni-checkbox-input {
    border-radius: 50%;

    background-color: orange !important;
    border-color: white;
    color: #ffffff !important;
  }

  .uni-navbar__header-btns.uni-navbar__header-btns-left.data-v-6bda1a90 {
    margin-top: 5%;
  }

  .label {
    width: 30px;
    text-align: center;
  }
</style>